<template>

<div class="baseInfo">
	<div class="overview">
		<div class="row game-row one">
        	<div class="col-xs-7 no-padding">
            	<img class="user-icon float" :src="base.userHead" @click="toPersonDetail">
            	<div class="float detail">
                	<div class="nickname"  v-text="base.nickname"></div>
                	<div class="rank" v-text="'当前排名：' + (base.ranknum <= 0?'--':base.ranknum)"></div>
           	 	</div>
        	</div>

        	<div class="col-xs-5 gross-rate no-padding">
        		<div class='rate'>
        			<div class="ratename">累计收益率</div>
            	    <div v-bind:class="{'nocolor-value': base.isNone, 'red-value': base.isRed,'green-value':base.isGreen, 'rateline': true}" v-text="base.total_profitrate+'%'"></div>
        		</div>
        		<div class='rate'>
        			<div class="ratename">持仓盈亏率</div>
            	    <div v-bind:class="{'nocolor-value': base.isNone, 'red-value': base.isRed,'green-value':base.isGreen, 'rateline': true}" v-text="base.income_balance+'%'"></div>
        		</div>
            </div>
   	 	</div>
   	 	
   	 	<div class='greyline'></div>

    	<div class="row game-row two">
        	<div class="part-one">
             	<div class="no-padding">
                 	<div class="total-assets">
                     	<div class="key">周涨幅率</div>
                     	<div class="value" v-text="base.week_increaserate || '-'"></div>
                	</div>
                	<div class="total-assets">
                    	<div class="key">总资产</div>
                    	<div class="value" v-text="base.total_balance"></div>
                 	</div>
                 	<div class="total-assets">
                    	<div class="key">初始资产</div>
                    	<div class="value" v-text="base.initmoney"></div>
                 	</div>
             	</div>
         	</div>


        	<div class="part-two">
            	<div class="no-padding">
                	<div class="total-assets">
                    	<div class="key">现金</div>
                    	<div class="value" v-text="base.avail_balance"></div>
                	</div>
                	<div class="total-assets">
                    	<div class="key">最大回撤</div>
                    	<div class="value" v-text="base.max_drawdown || '-'"></div>
                	</div>
                	<div class="total-assets">
                    	<div class="key">周收益率</div>
                    	<div class="value" v-text="base.week_profit || '-'"></div>
                	</div>
           		</div>
        	</div>

      	</div>
   </div>

    <div class="g-headline">
        <span></span>当前持仓<span class="position-head">仓位：<span class="position-value" v-text="base.position+'%'"></span></span>
	</div>
	<div class="grey-line-long"></div>

</div>


</template>

<script>
	import LocalDAO from 'common/localDAO'
	import RemoteDAO from 'common/remoteDAO'

	export default {
    	data () {
      		return {
      			base : {
      				nickname: LocalDAO.getNickname(),
                	ranknum : '-',
                	total_profitrate : '-',
                	income_balance : '-',
                	total_balance : '-',
                	avail_balance : '-',
                	week_increaserate:'-',
                    max_drawdown: '-',
                    initmoney: '-',
                    week_profit: '-',
                	position : '-',
                	isNone : true,
                	isRed : false,
                	isGreen : false,
                	userHead : '',
                	market_balance :'-'
      			}
      		}
    	},
    	props: {
    	  pageStatus: {
    	  	type: String
    	  }
    	},
    	created () {
            this.fetchData()
            this.getPersonDetail()
    	},
    	methods: {
    		fetchData(){
        		const userCode = this.pageStatus === 'self' ? LocalDAO.getUserCode() : this.$route.query.userCode;
        		const gameId = this.$route.query.gameId || "";
        		//查询比赛的持仓详情
        		RemoteDAO.callJCL11143(userCode,gameId,data => {
            		if(data.error == "0"){
                		let list = data.data.body.record;
                		let positionData = list;
                		if(positionData.length > 0){
                    		//整理返回的数据格式
                    		const ob = positionData[0];
							Object.assign(ob,
    										{
    											userHead : this.base.userHead,
    											nickname : this.base.nickname,
    											total_profitrate : parseFloat(list[0].total_profitrate).toFixed(2),
    											income_balance : (Number(list[0].income_balance)/Number(list[0].total_balance)*100).toFixed(2),
    											total_balance : Number(list[0].total_balance).toFixed(2),
    											market_balance : Number(list[0].market_balance).toFixed(2),
    											avail_balance : Number(list[0].avail_balance).toFixed(2),
    											initmoney: Number(list[0].initmoney).toFixed(2),
    											position : Number(list[0].position).toFixed(2),
    											ranknum : list[0].ranknum 
    										});
    						this.$data.base = ob;
    						
    						if (this.pageStatus === 'self'){
    						  //存储数据
                    		  this.saveShareData();
    						}
                    		//控制累计收益率的背景颜色
                    		if(this.base.total_profitrate >= 0){
                    			this.base.isNone = false;
                    			this.base.isRed = true;
                    		}else{
                    			this.base.isNone = false;
                    			this.base.isGreen = true;
                    		}
                		}
            		}else{

            		}
        		});
            },
            /*
             * 存储需要分享出去的数据到localStorage中
             */
            saveShareData(){
            	let data = {
                		"nickname": this.base.nickname,
                		"userHead":this.base.userHead,
                		"total_profitrate": this.base.total_profitrate,
                		"total_balance": this.base.total_balance,
                		"ranknum": this.base.ranknum,
                		"position": this.position,
                		"market_balance": this.base.market_balance,
                		"income_balance": this.base.income_balance,
                		"avail_balance": this.base.avail_balance
            	};
            	// 更新分享页数据
        		let gameSelfDetail = LocalDAO.getShareGameSelfDetails();
        		gameSelfDetail.gameAsset = data;
        		LocalDAO.setShareGameSelfDetails(gameSelfDetail);
    		},
    		getPersonDetail () {
    			if (this.pageStatus === 'self') {
    				this.base.nickname = LocalDAO.getNickname()
                    this.base.userHead = LocalDAO.getUserHead()
                    if(this.base.userHead  === ""){
                      this.base.userHead =  "https://dl.app.gtja.com/pictures/niutou/tou" + (parseInt(LocalDAO.getUserCode())%8+1)  + "@2x.png"
                    }
    			} else {
    		      let myUsercode = LocalDAO.getUserCode()
            	  RemoteDAO.callUC12008316(myUsercode,this.$route.query.userCode,data => {
                	if(data.error == "0"){
                      let userContent = data.data.body
                      if(userContent.length > 0){
                        if(userContent[0].USER_HEAD === ""){
                          this.base.userHead = "https://dl.app.gtja.com/pictures/niutou/tou" + (parseInt(myUsercode)%8+1)  + "@2x.png"
                         }else{
                           this.base.userHead = userContent[0].USER_HEAD
                         }
                    	 this.base.nickname = userContent[0].NICKNAME
                      }
                	}
            	  })
    			}
            },
            toPersonDetail () {
              if (this.pageStatus === 'self') {
                this.$router.push({path: '/selfdetail'})
              } else {
              	this.$router.push({path: '/otherdetail', query: {userCode: this.$route.query.userCode}})
              }
            }

       }
  }




</script>

<style lang="css" scoped>
.baseInfo{
    background-color: #fff;
    width:100%;
}
.game-row{
    margin-top:-7px !important;
    padding: 10px 15px 13px 15px;
    font-size: 12px;
}
.game-row .part-one{
	padding: 0 10px 0 10px;
}
.two, .two .total-assets{
	display:flex;
}
.two .part-one, .two .part-two{
	flex:1;
}
.two .grey-line{
    width:1px;
    height:30px;
    background-color:#B9EBFF;
}
.two .value{
	flex:2;
    font-size:14px;
}
.two .key{
	flex:1;
    color:#FFF7C3;
}
 .three{
    margin-top:8px !important;
}
 .overview .nickname{
    font-size:17px;
}
 .overview .gross-rate{
    font-size:14px;
    margin-top:-12px;
}
 .overview{
    padding-top: 20px;
    background-repeat: no-repeat;
    background-position: 0px -42px;
    background-size: cover;
    color:#fff;
    background-color:#F7743A;
}
 .overview .rank{
    font-size:1.2rem;
    color:#FFF7C3;
    margin-left:3px;
}
 .overview .detail{
    margin-left:10px;
    max-width:65%;
}
 .add-positive span:first-child{
    background-color: #ff4f4f;
    color: #ffffff;
    border-radius: 10px;
    font-size: 10px;
    display: inline-block;
    padding: 0 3px;
    margin-right: 2px;
}
.add-negative span:first-child{
    background-color: #98E466;
    color: #ffffff;
    border-radius: 10px;
    font-size: 10px;
    display: inline-block;
    padding: 0 4px;
    margin-right: 2px;
}
.g-headline{
    padding:10px 20px 0 20px;
    color:#565656;
    font-size:1.6rem;
}
.g-headline  > span:first-child{
    border-left: 3px solid #F7743A;
    display: inline-block;
    height: 13px;
    margin-right:5px;
}
 .nocolor-value{
    font-size:1.2rem;
    color:#fff;
}
 .red-value{
    color:#FF3333;
    background-color: #FFECE4;
    font-size:1.8rem;
    border-radius: 25px;
    margin-top: 5px;
}
 .green-value{
    color:#89CD4C;
    background-color: #FFECE4;
    font-size:1.8rem;
    border-radius: 25px;
    margin-top: 5px;
}
 .user-icon{
    max-width:50px;
    border-radius: 50%;
}
a:active{text-decoration:none;}
 .game-error{
    text-align: center;
    font-size: 15px;
    margin-top:20px;
}
.col-record a,.col-buy a{
    text-decoration: none;
}
.position-head{
    float:right;
}
.position-value{
    color:#F7743A;
}
.grey-line-long{
    width:100%;
    height:0.8px;
    background-color: #E7E7E7;
    margin-top:7px;
}
.rate{
	display:flex;
	align-items:baseline;
	margin-top:4px;
}
.rate .ratename{
	font-size: 1.2rem;
	flex:1;
}
.rate .rateline{
	width:73px;
	font-size: 14px;
	text-align: center;
	font-weight: bold;
	flex:1.2;
}
.greyline{
	width:100%;
	height:0.5px;
	background-color: RGBA(135,33,0,0.3);
	margin:3px 0 8px 0;
}
.float{
	float:left;
}
</style>
